<script setup>
import { reactive, toRefs } from 'vue'
// toRefs:将某数据转换成ref的响应式数据结构
// 用法：  const {需要解构的属性}=toRefs(对象)
const state = reactive({
  username: '张三',
  age: 18
})
const { username, age } = toRefs(state)
// username:{value:'张三'}  age:{value:18}
// const { username, age } = state
</script>

<template>
  <div class="page">
    <div>{{ username }}</div>
    <div>{{ age }}</div>
    <button @click="age++">修改age</button>
    <hr />
    <div>{{ state.username }}</div>
    <div>{{ state.age }}</div>
    <button @click="state.age++">修改age</button>
  </div>
</template>

<style scoped></style>
